<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02页面广告</title>
    <style>
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #0aa1ed;
            left: 20px;
        }
        .right {
            background-color: yellow;
            right: 20px;
        }
        .top {
            background-color: lightgreen;
            color: green;
            font-size: 30px;
            height: 120px;
            position: fixed;
            width: 100%;
            top: 0;
        }
        p {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis molestias nemo nesciunt placeat repudiandae suscipit voluptatibus. Esse harum magnam nesciunt odit porro qui repellat voluptate! Doloribus numquam quidem quos.</span><span>Accusantium aut deleniti dicta expedita in, nisi officiis sint voluptates. Eius esse impedit maxime perferendis ut? A earum, eos excepturi illum natus neque odio, quod reiciendis repellat saepe, sunt voluptatum!</span><span>Asperiores at distinctio earum facere facilis illo quasi quia repellat, similique, tempora ullam voluptatibus. Amet aut excepturi iure odio officia perspiciatis quis recusandae ullam? Amet eligendi iusto optio pariatur vero.</span><span>Error est illum mollitia perferendis! Distinctio fugit ipsam libero nulla rem sit soluta voluptatibus. Accusamus adipisci aspernatur doloremque dolorum, eaque excepturi fuga illum, itaque laborum porro praesentium quaerat similique voluptate!</span><span>Aut commodi consectetur distinctio eos ex facere maiores molestiae neque nihil nostrum omnis possimus quaerat rem, repellendus sit, veritatis voluptatum? Aliquid earum numquam quia quo. Aperiam ex exercitationem neque quae?</span><span>Aliquam dolore dolorum ea eligendi facere, ipsam natus nemo optio repellat sapiente voluptates voluptatum? Ab animi cupiditate dolor ex explicabo facilis quibusdam quis quisquam reprehenderit. Earum explicabo officiis vel voluptatum.</span><span>Ex, fugit, ipsa! At, blanditiis consectetur dignissimos, eaque eligendi error harum maxime necessitatibus perferendis quam qui quidem, voluptate? Architecto aspernatur deserunt facere iusto, nihil numquam quaerat quas reiciendis repellendus. Modi!</span><span>Ab, ad commodi dolores ducimus et eum facere ipsam iure minima modi natus nemo nihil nisi possimus quas quia quis repellat sit sunt tempore totam vero voluptates voluptatibus! Aliquam, quibusdam!</span><span>Alias deleniti eligendi inventore iusto minima modi neque nobis temporibus. Aperiam at blanditiis corporis debitis dicta dolore eligendi ipsa magnam nemo neque nostrum numquam reprehenderit temporibus, ullam ut vel velit?</span><span>Consequuntur quidem quos ullam. A architecto distinctio dolor eaque exercitationem facilis harum laudantium obcaecati optio provident quidem quisquam quod rem, repellendus repudiandae saepe, sit soluta, tempore totam unde ut vitae.</span><span>Aliquid aperiam distinctio eius eos est facere hic id illo, illum laboriosam magni molestiae non nostrum optio possimus provident quae, quaerat quidem quisquam rerum sequi soluta temporibus. Aliquid esse, minima.</span><span>Ab animi aspernatur assumenda consectetur culpa deleniti deserunt enim eos fugiat labore, libero magni mollitia natus omnis optio perspiciatis provident reprehenderit sapiente sint sit tempora totam unde veniam. Quaerat, ratione.</span><span>Accusantium, ad assumenda blanditiis corporis cum facere labore nisi pariatur porro quae ratione sint suscipit, tempore temporibus, veritatis. A accusamus culpa eaque facere id illo ipsam possimus sapiente sequi voluptates?</span><span>Accusamus adipisci aperiam blanditiis cupiditate delectus dignissimos doloremque dolores eius esse explicabo facere illum ipsa magnam natus nulla odit officia perferendis possimus quam quis similique sit, suscipit vel veniam vitae?</span><span>Aut blanditiis facilis perspiciatis possimus. Aspernatur deleniti dolorum expedita provident quos repellendus sed tempora tempore velit voluptas? Architecto assumenda, cumque ea quas quo ratione rerum! Perspiciatis praesentium sunt vel voluptates.</span><span>Aperiam, asperiores autem error ipsam quisquam ullam. Alias atque commodi consectetur enim ex harum laborum nihil officia placeat porro quos repellat sit, suscipit velit voluptates! Adipisci assumenda consequatur odio quibusdam.</span><span>Amet commodi expedita facere nemo nesciunt obcaecati placeat, porro possimus quibusdam quis! Architecto culpa, dolore impedit molestiae numquam suscipit veritatis. Amet culpa cum, deleniti dolor excepturi impedit magni molestias ullam?</span><span>A aliquam aperiam at autem consequatur distinctio doloribus ducimus earum expedita facere facilis laborum minus nihil obcaecati, quas sapiente velit? Assumenda commodi debitis earum eum incidunt magnam repudiandae vitae voluptate.</span><span>At aut consequuntur corporis deleniti dolor enim eos mollitia, obcaecati praesentium provident quasi soluta ut voluptatibus? Aliquid, nesciunt, nisi. Autem corporis doloribus, ducimus fuga incidunt nesciunt nihil obcaecati omnis voluptatem.</span><span>Ab asperiores delectus quod totam. Consectetur distinctio dolorum, facilis harum ipsum minus neque quas. Alias culpa distinctio doloremque esse expedita hic itaque necessitatibus, nisi obcaecati odit praesentium repellat sed voluptatum.</span><span>Fugit quam quod ullam vitae. Alias aliquid autem cum cupiditate dolor dolorum earum enim error facilis, id iusto libero mollitia neque nisi porro quasi quisquam repellendus reprehenderit tempore vitae, voluptate?</span><span>A ab ad aut delectus deserunt eligendi facilis id incidunt inventore ipsam itaque laborum maiores maxime nostrum perferendis praesentium quaerat, quas qui quibusdam rem reprehenderit soluta vel! Animi, quas, voluptate.</span><span>Adipisci cupiditate dolorem ea, ex maxime minus nihil non officiis omnis sequi! Accusantium atque, dicta, fugiat illum inventore itaque molestiae, nesciunt perferendis quae qui reiciendis reprehenderit sint unde voluptate voluptates!</span><span>Ad adipisci animi commodi consequatur cumque delectus dicta dignissimos dolorem ducimus eveniet facere hic iste labore laborum maiores, maxime necessitatibus nemo non placeat quam quia ratione tempora tenetur. Dolores, rem!</span><span>A amet consequatur quis. Ab blanditiis commodi consequuntur fugiat laudantium magnam non quae qui ratione vel? Aliquid at atque distinctio excepturi, iure laborum, libero obcaecati perspiciatis quod sint, vel vero?</span><span>Amet animi aut consequuntur dolor earum impedit molestiae mollitia pariatur, possimus provident qui quis repellendus temporibus? Adipisci blanditiis, consequatur cupiditate doloribus error nesciunt non, obcaecati quibusdam similique, suscipit voluptas voluptate.</span><span>Blanditiis commodi consequatur cupiditate distinctio doloremque dolores doloribus eaque esse excepturi labore nemo nihil nobis officia quae qui quis quod ratione recusandae sapiente sequi sunt, temporibus totam veniam voluptas voluptatum.</span><span>Alias, amet blanditiis consequuntur doloremque exercitationem expedita fugiat, harum nobis, odit provident reiciendis sunt ullam. Amet architecto aspernatur debitis eligendi et eum, itaque laboriosam mollitia numquam ratione repellendus, sapiente, suscipit?</span><span>A aperiam corporis ea eum fuga harum ipsum itaque, iure libero, modi molestiae molestias quam quo, rerum temporibus tenetur totam vel velit voluptates voluptatum. Corporis cum nostrum porro quasi unde!</span><span>Corporis distinctio ex excepturi libero nostrum reprehenderit velit! Ad ducimus nihil voluptates! Cum deleniti, distinctio earum impedit in, inventore iste modi necessitatibus quam quis ratione repellendus sit tenetur ullam voluptatum!</span><span>Ad assumenda aut beatae consectetur consequuntur cupiditate delectus distinctio earum excepturi, fugiat impedit, labore laborum minima officia officiis porro quasi quisquam quod recusandae reiciendis reprehenderit sed sint sunt temporibus veniam!</span><span>Accusamus ad adipisci aliquam amet asperiores deleniti explicabo officiis reiciendis suscipit veniam? Consequatur delectus incidunt numquam suscipit voluptatum. Adipisci cupiditate dicta ducimus eligendi error illo minima, odio omnis quisquam? Perspiciatis.</span><span>Aspernatur, assumenda at blanditiis dignissimos dolor eligendi ex, incidunt nam nemo nisi, quisquam rem voluptate voluptatum! Aut et expedita itaque laboriosam libero nulla quam, quas quis reprehenderit, tempora temporibus tenetur!</span><span>Amet, cum inventore itaque modi provident quod? A autem dignissimos dolorem dolorum error, id illum, incidunt maxime nam non odit saepe vero! Dolores, error iusto perferendis quod rerum sed sit!</span><span>A accusamus aliquam atque blanditiis cumque cupiditate dignissimos distinctio dolores ea earum eos error facere ipsa mollitia, necessitatibus nihil numquam odit officia, quam quas recusandae rerum sequi ut veniam voluptates.</span><span>Dolor dolorum, impedit libero nemo nesciunt provident ullam! Architecto cumque, ea laboriosam minus necessitatibus quos. Aspernatur distinctio eveniet in natus neque pariatur qui, sed veritatis. Enim necessitatibus non quaerat sunt.</span><span>Aspernatur delectus, deleniti facilis in ipsam natus repudiandae similique. Amet commodi dolore ea earum iste nisi nostrum. Ad asperiores consequatur fugit hic illo laudantium maxime odio perspiciatis sit! Ab, delectus.</span><span>At, blanditiis culpa dolorem eligendi, illum iure maxime nobis nulla obcaecati odit quo reprehenderit veniam? Blanditiis, eum facere fuga in quas soluta veritatis voluptatibus. Culpa doloremque maiores porro reiciendis voluptatum!</span><span>Adipisci atque cupiditate fugit inventore numquam officia quod veniam voluptatum. A ad aspernatur autem dignissimos fuga quam repudiandae totam? Aperiam asperiores atque blanditiis doloremque est facilis ipsam natus odio vitae.</span><span>Dignissimos eaque harum modi provident voluptas voluptatem. Adipisci aperiam cupiditate distinctio dolor eligendi fuga harum impedit in, ipsam magnam maiores necessitatibus nemo neque quas tenetur ut voluptate? Corporis, doloremque maxime.</span></p>
</body>
</html>